<template>
  <div class="team-box">
    <!--搜索-->
    <div class="search-body">
      <div class="input-box">
        <img src="../../assets/images/search-ico.png" alt=""/>
        <router-link to="">
          <input type="text" placeholder="请输入产品名称"/>
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="vip-list" v-for="(items,index) in goodsList" v-if="items.upgradePatch==0&items.isActivity==0">
        <div class="fl-flex">
          <div class="fl-left">
            <img :src="sourceUrl+items.goodsImg" alt="">
          </div>
          <div class="fl-right">
            <p>{{items.goodsName}}</p>
            <div class="discribe">
              黑加仑樱桃等新鲜水果香气精致的单宁加上木桶的醇香让人回味无穷
            </div>
            <div class="summary">
              <span class="gender">￥ {{items.shopPrice}}<span class="pay"></span>
              <span class="rep" @click="toDetail(items.id)">
                <img src="../../assets/images/bh.png" alt="">
                进货
              </span>
              <span class="rep" style="margin-right: 1px" @click="addToPurchase(items.id)">
                加入进货单
              </span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <!--<div class="vip-list">-->
        <!--<div class="fl-flex">-->
          <!--<div class="fl-left">-->
            <!--<img src="../../assets/images/p-1.png" alt="">-->
          <!--</div>-->
          <!--<div class="fl-right">-->
            <!--<p>法国波尔多AOC银奖干红大商股份是德国650ml</p>-->
            <!--<div class="discribe">-->
              <!--黑加仑樱桃等新鲜水果香气精致的单宁加上木桶的醇香让人回味无穷-->
            <!--</div>-->
            <!--<div class="summary">-->
              <!--<span class="gender">￥ 66666<span class="pay">1.5万人已付款</span>-->
              <!--<span class="rep">-->
                <!--<img src="../../assets/images/bh.png" alt="">-->
                <!--补货-->
              <!--</span>-->
              <!--</span>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    </div>
    <div class="jh">
      <router-link to="PurchaseCart">
        <p class="rep">
          <img src="../../assets/images/bh.png" alt="">
          进货单
        </p>
      </router-link>

    </div>
    <span class="new-tips" >{{count}}</span>
    <TextPop v-if="addSuccess" :textPop="popAddSuccess"></TextPop>
    <TextPop v-if="addFail" :textPop="popAddFail"></TextPop>
  </div>
</template>

<script>
  import global from '../public/global.vue'
  export default {
    name: "Purchase",
    data(){
      return{
        sourceUrl:global.sourceUrl,
        goodsList:[],//商品列表
        count:0,//进货单统计
        addSuccess:false,
        popAddSuccess:'添加成功,请到进货单查看',
        addFail:false,
        popAddFail:'已经添加过此商品',
      }
    },
    methods:{
      //获取商品
      getGoodsList() {
        let self = this;
        let url = global.apiUrl;
        self.$http.get(url + '/goods/goodsList')
          .then(res => {
//            console.log(res);
            if (res.data.code == 0) {
              self.goodsList = res.data.data
            }
          }).catch(function (err) {
          console.error(err);
        })
      },
      toDetail(id){
        this.$router.push({path: '/goodsDetail?pid='+id+'&isReplenishment=1'});
      },
      countPurchaseNum() {
        let self = this;
        let url = global.apiUrl;
        self.$http.get(url + '/shoppingCart/countPurchaseNum')
          .then(res => {
            if (res.data.code == 0) {
              self.count = res.data.data
            }
          }).catch(function (err) {
          console.error(err);
        })
      },
      addToPurchase(id){
        let params = new URLSearchParams();
        params.append("goodsId",id);
        this.$http({
          url: global.apiUrl + '/shoppingCart/addToPurchase',
          method: 'post',
          data: params,
        }).then(res => {
          if(res.data.code==0){
            console.log(res);
            this.countPurchaseNum()
            this.addSuccess = true
            setTimeout(() => {
              this.addSuccess = false
            }, 2000)
          }else{
            this.addFail = true
            setTimeout(() => {
              this.addFail = false
            }, 2000)
          }
        }).catch(function (err) {
          console.error(err);
        });
      }
    },
    mounted () {
      document.title = "进货-补货";
    },
    created(){
      this.getGoodsList();
      this.countPurchaseNum()
    }
  }
</script>

<style lang="less" scoped>
  .team-box {
    /*position: absolute;*/
    /*top: 50px;*/
    /*left: 0;*/
    width: 100%;
    min-height: 100%;
    background: #f3f3f3;
    font-size: 1rem;
    margin-top: 50px;
    /*搜索*/
    .search-body {
      position: fixed;
      top: 0px;
      left: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #D44242;
      text-align: center;
      padding-top: 10px;
      .location, .input-box, .filter-box {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        color: #fff;
        vertical-align: top;
      }
      .input-box {
        width: 85%;
        line-height: 26px;
        padding: 0 4px;
        border-radius: 4px;
        background-color: #fff;
        text-align: center;
        img {
          width: 5%;
          vertical-align: sub;
        }
        input {
          width: 76%;
          height: 30px;
          border: none;
          outline: none;
          vertical-align: top;
        }
      }
    }
    .content {
      width: 100%;
      .vip-list {
        width: 100%;
        background: #FFF;
        /*margin-bottom: 10px;*/
        /*padding-bottom: 10px;*/
      }
      .fl-flex {
        width: 95%;
        /*padding: 3% 2.5% 2%;*/
        background: #fff;
        display: flex;
        border-bottom: 1px solid #D9D9D9;
        margin: 0 auto;
        padding: 10px 0;
        .fl-left {
          img {
            width: 85px;
            height: 85px;
          }
        }
        .fl-right {
          margin-left: 10px;
          overflow: hidden;
          p {
            height: 1.3rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            font-size: 0.9rem;
          }
          .discribe {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 0.8rem;
            color: #aaa;
            margin-bottom: 5px;
          }
          .summary {
            /*height: 30px;*/
            font-size: 0.7rem;
            .gender {
              color: #FB3F40;
              vertical-align: sub;
              .pay {
                font-size: 0.3rem;
                color: #c1c1c1;
                padding-left: 3px;
              }
              .rep {
                display: inline-block;
                padding: 3px 10px;
                background: #fb3f40;
                color: #FFF;
                border-radius: 12px;
                float: right;
                img {
                  width: 15px;
                  height: 15px;
                  vertical-align: top;
                }
              }
            }
          }
        }
      }
    }

    .jh {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #FFF;
      height: 50px;
      margin-top: 10px;
      .rep {
        padding: 5px 20px;
        background: #d44242;
        color: #FFF;
        border-radius: 15px;
        font-size: 0.8rem;
        width: 30%;
        text-align: center;
        margin: 10px auto;
        img {
          width: 15px;
          height: 15px;
          vertical-align: top;
        }
      }
    }
    .new-tips{
      position: fixed;
      left: 50%;
      bottom:32px;
      width:18px;
      height:18px;
      line-height:18px;
      border-radius: 50%;
      background:#d44242;
      font-size: 0.65rem;
      color:#fff;
      text-align:center;
      margin-left: 35px;
    }
  }
</style>
